<template>
  <div class="seller-manage">
    <el-card>
      <div class="table-actions">
        <el-input v-model="search.id" placeholder="卖家ID" style="width: 140px; margin-right: 8px;" clearable />
        <el-input v-model="search.site" placeholder="站点" style="width: 140px; margin-right: 8px;" clearable />
        <el-input v-model="search.shop" placeholder="店铺名称" style="width: 140px; margin-right: 8px;" clearable />
        <el-input v-model="search.company" placeholder="公司名称" style="width: 140px; margin-right: 8px;" clearable />
        <el-input v-model="search.tno" placeholder="T番号" style="width: 140px; margin-right: 8px;" clearable />
      </div>
      <el-table :data="pagedList" style="width: 100%; margin-bottom: 12px;">
        <el-table-column prop="id" label="卖家ID" width="100" />
        <el-table-column prop="site" label="站点" width="120" />
        <el-table-column label="头像" width="80">
          <template #default="scope">
            <el-avatar :src="scope.row.avatar" :size="40">
              <el-icon><User /></el-icon>
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="shopType" label="店铺类型" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.shopType === '个人' ? 'info' : 'success'" size="small">
              {{ scope.row.shopType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="shop" label="店铺名称" width="160" />
        <el-table-column prop="company" label="公司名称" width="180" />
        <el-table-column prop="tno" label="T番号" width="120" />
        <el-table-column prop="postcode" label="邮编" width="100" />
        <el-table-column prop="certType" label="认证类型" width="120">
          <template #default="scope">
            <el-tag :type="getCertTypeColor(scope.row.certType)" size="small">
              {{ scope.row.certType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="goodReviews" label="好评数" width="100" />
        <el-table-column prop="badReviews" label="差评数" width="100" />
        <el-table-column label="操作" width="160">
          <template #default="scope">
            <el-button size="small" @click="showDetail(scope.row)">详情</el-button>
            <el-button size="small" @click="openDialog('edit', scope.row, scope.$index)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 16px; text-align: right;">
        <el-pagination
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :total="filteredList.length"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 50]"
        />
      </div>
      
      <!-- 编辑弹窗 -->
      <el-dialog v-model="dialog.visible" :title="dialog.mode === 'add' ? '新增卖家' : '编辑卖家'" width="600px" :close-on-click-modal="false">
        <el-form :model="dialog.form" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="站点" required>
                <el-input v-model="dialog.form.site" :disabled="dialog.mode === 'edit'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="店铺类型" required>
                <el-select v-model="dialog.form.shopType" style="width: 100%" :disabled="dialog.mode === 'edit'">
                  <el-option label="个人" value="个人" />
                  <el-option label="商家" value="商家" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="店铺名称" required>
                <el-input v-model="dialog.form.shop" :disabled="dialog.mode === 'edit'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司名称">
                <el-input v-model="dialog.form.company" :disabled="dialog.mode === 'edit'" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="T番号">
                <el-input v-model="dialog.form.tno" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮编">
                <el-input v-model="dialog.form.postcode" :disabled="dialog.mode === 'edit'" />
              </el-form-item>
            </el-col>
          </el-row>
                       <el-row :gutter="20">
               <el-col :span="12">
                 <el-form-item label="认证类型">
                   <el-select v-model="dialog.form.certType" style="width: 100%" :disabled="dialog.mode === 'edit'">
                     <el-option label="未认证" value="未认证" />
                     <el-option label="已认证" value="已认证" />
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="状态">
                   <el-select v-model="dialog.form.status" style="width: 100%" :disabled="dialog.mode === 'edit'">
                     <el-option label="启用" value="启用" />
                     <el-option label="停用" value="停用" />
                   </el-select>
                 </el-form-item>
               </el-col>
             </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="好评数">
                <el-input-number v-model="dialog.form.goodReviews" :min="0" style="width: 100%" :disabled="dialog.mode === 'edit'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="差评数">
                <el-input-number v-model="dialog.form.badReviews" :min="0" style="width: 100%" :disabled="dialog.mode === 'edit'" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="卖家电话">
                <el-input v-model="dialog.form.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="头像">
                <el-input v-model="dialog.form.avatar" :disabled="dialog.mode === 'edit'" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="卖家地址">
            <el-input v-model="dialog.form.address" type="textarea" :rows="2" />
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="税号">
                <el-input v-model="dialog.form.taxCode" :disabled="dialog.mode === 'edit'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input v-model="dialog.form.remark" :disabled="dialog.mode === 'edit'" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <el-button @click="dialog.visible = false">取消</el-button>
          <el-button type="primary" @click="saveSeller">保存</el-button>
        </template>
      </el-dialog>
      
      <!-- 详情弹窗 -->
      <el-dialog v-model="detailDialog.visible" title="卖家详情" width="800px" :close-on-click-modal="false">
        <div class="detail-content">
                    <!-- 基本信息 -->
          <div class="detail-section">
            <h3 class="section-title">基本信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="label">卖家ID：</span>
                  <span class="value">{{ detailDialog.data.id }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="label">站点：</span>
                  <span class="value">{{ detailDialog.data.site }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="label">店铺类型：</span>
                  <el-tag :type="detailDialog.data.shopType === '个人' ? 'info' : 'success'" size="small">
                    {{ detailDialog.data.shopType }}
                  </el-tag>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="label">店铺名称：</span>
                  <span class="value">{{ detailDialog.data.shop }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="label">公司名称：</span>
                  <span class="value">{{ detailDialog.data.company }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="label">T番号：</span>
                  <span class="value">{{ detailDialog.data.tno }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="label">邮编：</span>
                  <span class="value">{{ detailDialog.data.postcode }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="label">认证类型：</span>
                  <el-tag :type="getCertTypeColor(detailDialog.data.certType)" size="small">
                    {{ detailDialog.data.certType }}
                  </el-tag>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="label">头像：</span>
                  <el-avatar :src="detailDialog.data.avatar" :size="40">
                    <el-icon><User /></el-icon>
                  </el-avatar>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="detail-item">
                  <span class="label">税号：</span>
                  <span class="value">{{ detailDialog.data.taxCode }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detail-item">
                  <span class="label"></span>
                  <span class="value"></span>
                </div>
              </el-col>
            </el-row>
          </div>
          
          <!-- 联系信息 -->
          <div class="detail-section">
            <h3 class="section-title">联系信息</h3>
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="detail-item">
                  <span class="label">卖家电话：</span>
                  <span class="value">{{ detailDialog.data.phone }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="detail-item">
                  <span class="label">卖家地址：</span>
                  <span class="value">{{ detailDialog.data.address }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
          
          <!-- 评价信息 -->
          <div class="detail-section">
            <h3 class="section-title">评价信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="label">好评数：</span>
                  <span class="value">{{ detailDialog.data.goodReviews }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="label">差评数：</span>
                  <span class="value">{{ detailDialog.data.badReviews }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="label">好评率：</span>
                  <span class="value">{{ getGoodRate(detailDialog.data) }}%</span>
                </div>
              </el-col>
            </el-row>
          </div>
          
          <!-- 卖家描述 -->
          <div class="detail-section">
            <h3 class="section-title">卖家描述</h3>
            <div class="detail-item">
              <span class="value">{{ detailDialog.data.remark || '暂无描述' }}</span>
            </div>
          </div>
        </div>
        <template #footer>
          <el-button @click="detailDialog.visible = false">关闭</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { User } from '@element-plus/icons-vue'

const sellerList = ref([
  { 
    id: '1001', 
    site: 'ヤフオク!', 
    shopType: '个人',
    shop: '東京古物堂', 
    company: '株式会社東京古物', 
    tno: 'T123456', 
    status: '启用', 
    phone: '03-1234-5678', 
    address: '東京都千代田区丸の内1-1-1', 
    taxCode: '91310000MA1KXXXX1', 
    remark: '老舗オークションストア',
    postcode: '100-0001',
    certType: '已认证',
    goodReviews: 1250,
    badReviews: 15,
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  { 
    id: '1002', 
    site: 'メルカリ', 
    shopType: '商家',
    shop: 'メルカリショップ新宿', 
    company: 'メルカリ株式会社', 
    tno: 'T654321', 
    status: '停用', 
    phone: '03-8765-4321', 
    address: '東京都新宿区西新宿2-2-2', 
    taxCode: '91110000MA0FXXXX2', 
    remark: '一時休店',
    postcode: '160-0023',
    certType: '已认证',
    goodReviews: 890,
    badReviews: 8,
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  { 
    id: '1003', 
    site: 'ラクマ', 
    shopType: '个人',
    shop: '大阪リサイクル', 
    company: '株式会社大阪リサイクル', 
    tno: 'T111222', 
    status: '启用', 
    phone: '06-1234-5678', 
    address: '大阪府大阪市北区梅田3-3-3', 
    taxCode: '91440300MA5FXXXX3', 
    remark: '',
    postcode: '530-0001',
    certType: '未认证',
    goodReviews: 567,
    badReviews: 3,
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  { 
    id: '1004', 
    site: 'バイマ', 
    shopType: '商家',
    shop: '神戸ブランド館', 
    company: '神戸ブランド株式会社', 
    tno: 'T222333', 
    status: '启用', 
    phone: '078-123-4567', 
    address: '兵庫県神戸市中央区三宮町4-4-4', 
    taxCode: '91234567MA9FXXXX4', 
    remark: '高級ブランド専門',
    postcode: '650-0021',
    certType: '已认证',
    goodReviews: 2340,
    badReviews: 12,
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  }
])

const search = ref({ id: '', site: '', shop: '', company: '', tno: '' })
const page = ref({ current: 1, size: 10 })

const filteredList = computed(() => {
  return sellerList.value.filter(item => {
    return (!search.value.id || item.id.includes(search.value.id)) &&
      (!search.value.site || item.site.includes(search.value.site)) &&
      (!search.value.shop || item.shop.includes(search.value.shop)) &&
      (!search.value.company || item.company.includes(search.value.company)) &&
      (!search.value.tno || item.tno.includes(search.value.tno))
  })
})

const pagedList = computed(() => {
  const start = (page.value.current - 1) * page.value.size
  return filteredList.value.slice(start, start + page.value.size)
})

const dialog = ref({
  visible: false,
  mode: 'add' as 'add' | 'edit',
  form: { 
    id: '', 
    site: '', 
    shopType: '个人',
    shop: '', 
    company: '', 
    tno: '', 
    status: '启用',
    phone: '',
    address: '',
    taxCode: '',
    remark: '',
    postcode: '',
    certType: '未认证',
    goodReviews: 0,
    badReviews: 0,
    avatar: ''
  },
  editIndex: -1
})

const detailDialog = ref({
  visible: false,
  data: { 
    id: '', 
    site: '', 
    shopType: '',
    shop: '', 
    company: '', 
    tno: '', 
    status: '', 
    phone: '', 
    address: '', 
    taxCode: '', 
    remark: '',
    postcode: '',
    certType: '',
    goodReviews: 0,
    badReviews: 0,
    avatar: ''
  }
})

function getCertTypeColor(type: string) {
  const colorMap: Record<string, string> = {
    '未认证': 'info',
    '已认证': 'success'
  }
  return colorMap[type] || 'info'
}

function getGoodRate(data: any) {
  const total = data.goodReviews + data.badReviews
  if (total === 0) return 0
  return Math.round((data.goodReviews / total) * 100)
}

function openDialog(mode: 'add' | 'edit', row?: any, idx?: number) {
  dialog.value.mode = mode
  if (mode === 'add') {
    dialog.value.form = { 
      id: '', 
      site: '', 
      shopType: '个人',
      shop: '', 
      company: '', 
      tno: '', 
      status: '启用',
      phone: '',
      address: '',
      taxCode: '',
      remark: '',
      postcode: '',
      certType: '未认证',
      goodReviews: 0,
      badReviews: 0,
      avatar: ''
    }
    dialog.value.editIndex = -1
  } else if (row && typeof idx === 'number') {
    dialog.value.form = { ...row }
    dialog.value.editIndex = idx
  }
  dialog.value.visible = true
}

function saveSeller() {
  const idx = dialog.value.editIndex
  if (dialog.value.mode === 'add') {
    const newId = (Math.max(...sellerList.value.map(i => Number(i.id)), 1000) + 1).toString()
    sellerList.value.push({ ...dialog.value.form, id: newId })
  } else if (idx > -1) {
    // 编辑模式下只更新允许修改的字段
    const originalData = sellerList.value[idx]
    sellerList.value[idx] = {
      ...originalData,
      phone: dialog.value.form.phone,
      address: dialog.value.form.address,
      tno: dialog.value.form.tno
    }
  }
  dialog.value.visible = false
}

function showDetail(row: any) {
  detailDialog.value.data = { ...row }
  detailDialog.value.visible = true
}
</script>

<style scoped>
.seller-manage {
  padding: 16px;
}

.table-actions {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-content {
  padding: 0;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  border-bottom: 2px solid #409eff;
  padding-bottom: 8px;
}

.detail-item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.label {
  font-weight: 600;
  color: #606266;
  min-width: 80px;
  margin-right: 8px;
}

.value {
  color: #303133;
  flex: 1;
}
</style> 